<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="shortcut icon" href="./img/logo.jpg" />
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/miindex.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/cart.css">
</head>
<style>
  header {
    width: 100%;
    display: flex;
    height: 72px;
    background-color: white;
    font-size: 16px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid rgb(218, 218, 218);
    z-index: 10;
  }

  .header_left {
    width: 50%;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-right: 100px;
  }

  .header_left img {
    width: 40px;
    height: 40px;

  }


  .header_menu span {
    font-size: 25px;
    width: 40px;
    height: 40px;
  }

  .header_right {
    padding-right: 80px;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .header_right span {
    font-size: 22px;
  }

  .header_right input {
    width: 260px;
    height: 40px;
    text-indent: 0;
    /* height: 100%; */
    background-color: transparent;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* border-style: none; */
    border: 1px solid gray;
    background-color: white;
  }


  .search {
    display: flex;
    justify-content: left;
    align-items: center;
    /* border-collapse: collapse; */
  }

  .header_right .search_a {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(218, 218, 218);
    border-left: 0;
  }
</style>

<body>
  <header>
    <div class="header_left">
      <a href="index.html"><img src="./img/logo.jpg" alt=""></a>
      <span class="women" style="font-size: 22px;">我的购物车</span>
     
    </div>
    <!-- <input type="radio" name="sex" id="">
    <input type="radio" name="sex" id=""> -->
    <div class="header_right">
      <div class="search">
        <input type="text" placeholder="搜索商品">
        <span class="iconfont search_a">&#xe651;</span>

      </div>
      <span class="iconfont">&#xe62f;</span>
      <span class="iconfont">&#xe638;</span>
      <span class="iconfont">&#xe6de;</span>
      <span class="iconfont">&#xe631;</span>

    </div>

  </header>
  <main>
    <div id="app">
      <div class="shoppingBar">
        <h2></h2>
        <table>
          <tr>
            <th><input type="checkbox" title="全选" class="selectAll"></th>
            <th class="proNmae">商品名称</th>
            <th>数量</th>
            <th>单价（元）</th>
            <th>金额（元）</th>
            <th>操作</th>
          </tr>
          <tbody class="tbody">

            <tr class="commodity">
              <th><input type="checkbox" class="input select" value="1"></th>
              <th class="content"><img src="" width="100px" height="100px">
                <p>电视机 </p>
              </th>
              <th><button type="button">
                  -
                </button> <span class="spanNumber">
                  1
                </span> <button type="button">
                  +
                </button></th>
              <th>
                200
              </th>
              <th class="money">
                200
              </th>
              <th><span class="glyphicon glyphicon-remove">删除
                </span></th>
            </tr>
            <tr class="commodity">
              <th><input type="checkbox" class="input select" value="1"></th>
              <th class="content"><img src="" width="100px" height="100px">
                <p>洗衣机</p>
              </th>
              <th><button type="button">
                  -
                </button> <span class="spanNumber">
                  1
                </span> <button type="button">
                  +
                </button></th>
              <th>
                150
              </th>
              <th class="money">
                150
              </th>
              <th><span class="glyphicon glyphicon-remove">删除
                </span></th>
            </tr>
            <tr class="commodity">
              <th><input type="checkbox" class="input select" value="3"></th>
              <th class="content"><img src="" width="100px" height="100px">
                <p>冰箱 </p>
              </th>
              <th><button type="button">-</button>
                <span class="spanNumber">1</span>
                <button type="button">+</button></th>
              <th>
                100
              </th>
              <th class="money">
                100
              </th>
              <th><span class="glyphicon glyphicon-remove">删除
                </span></th>
            </tr>
          </tbody>
        </table>
        <div class="shoppingBar-footer">
          <div class="manage"><span class="delAll">
              清空购物车
            </span> <span class="return">
              继续购物
            </span></div> <button id="go" type="button">
            去结算
          </button>
          <div class="buy"><span>
              0
            </span>
            件商品总计:
            <span>
               <span class="totalPrice" style="font-size: 28px;">0.00</span> <span style="font-size:16px"> 元</span> 
            </span></div>
        </div>
      </div>
    </div>
  </main>
</body>

<script src="./js/common.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/cart.js"></script>

</html>